<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style type="text/css">
			.content {
			  padding: 10;
			  display: grid;
			  grid-template-columns: auto auto auto auto;
			  grid-template-rows: auto auto auto;
			  height: 780px;   //padding 有个20的宽度
			  background-color: #000;
			  grid-gap: 10px;
			}
		</style>
		
	</head>
	
	
	<body>
		233
		<div id="app">
			{{ message }}
			<div @click="test">按钮</div>
			<div @click="test2">按钮2</div>
			<ul class="content">
				<li style="display: inline;width: 40%;background-color: #07C160;" v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ul>
		</div>
	</body>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!',
				todos: [{
						text: 'AAA'
					},
					{
						text: 'BBB'
					},
					{
						text: 'CCC'
					},
					{
						text: 'DDD'
					},
					{
						text: 'EEE'
					},
					{
						text: 'FFF'
					},
					{
						text: 'GGG'
					},
					{
						text: 'HHH'
					}
				]
			},
			methods: {
				test2() {
					this.message = 'change';
					console.log('----test2------');
				},
				test() {
					console.log('-----11------');
					this.testGet();
				},
				testGet() {
					axios
						.post('https://test.luyiwangluo.com/api/v15/car/saleCarHome', {
							params: {
								//cat: 2,
								//isfromajax: 1
							},
							headers: {
									'content-type': 'application/x-www-form-urlencoded',
									'apiauth': '',
									'version': 'v1.0.9'
								}
						})
						.then(response => {
							console.log(response);
						})
						.catch(function(error) { // 请求失败处理
							console.log('-----11------');
							//console.log(error);
						});
				},
			},
			mounted() {
				this.testGet()
				console.log('钩子')
			}
		})
	</script>

</html>
